<template>
  <div class="container">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-position="top"
    >
      <el-row :gutter="32">
        <el-col :span="12">
          <el-form-item :label="$t('common.project')" prop="project_id">
            <el-select
              v-model="formData.project_id"
              :placeholder="$t('common.pleaseSelect')"
              @change="handleProjectChange"
              :disabled="disabled"
            >
              <el-option
                v-for="item in projectOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('common.site')" prop="site_id">
            <el-select
              v-model="formData.site_id"
              :placeholder="$t('common.pleaseSelect')"
              @change="handleSiteChange"
              :disabled="disabled"
            >
              <el-option
                v-for="item in siteOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('common.WBS')" prop="wbs_id">
            <el-select
              v-model="formData.wbs_id"
              :placeholder="$t('common.pleaseSelect')"
              :disabled="disabled"
            >
              <el-option
                v-for="item in wbsOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('common.taskName')" prop="task_name">
            <el-input
              v-model="formData.task_name"
              :placeholder="$t('common.pleaseEnter')"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item
            :label="$t('common.personInCharge')"
            prop="person_incharge"
          >
            <el-select
              v-model="formData.person_incharge"
              :placeholder="$t('common.pleaseSelect')"
              :disabled="disabled"
            >
              <el-option
                v-for="item in groupleaderOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                @change="handleChange"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item
            :label="$t('common.personInChargePhone')"
            prop="person_incharge_phone"
          >
            <el-input
              v-model="formData.person_incharge_phone"
              :placeholder="$t('common.autofill')"
              disabled
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item :label="$t('common.startDate')" prop="start_d">
            <el-date-picker
              v-model="formData.start_d"
              :disabled="disabled"
              type="date"
              style="width: 100%"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :placeholder="$t('common.startDate')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('common.endDate')" prop="end_d">
            <el-date-picker
              v-model="formData.end_d"
              :disabled="disabled"
              type="date"
              style="width: 100%"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :placeholder="$t('common.endDate')"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item
            :label="$t('common.stakeholders')"
            prop="stakeholder_id"
          >
            <el-select
              v-model="formData.stakeholder_id"
              :disabled="disabled"
              multiple
              collapse-tags
              collapse-tags-tooltip
              :max-collapse-tags="3"
              :placeholder="$t('common.pleaseSelect')"
            >
              <el-option
                v-for="item in stakeholderOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item :label="$t('common.status')" prop="status">
            <el-select
              v-model="formData.status"
              :placeholder="$t('common.pleaseSelect')"
              :disabled="disabled"
            >
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('common.riskDesc')" prop="risks">
            <el-input
              v-model="formData.risks"
              :placeholder="$t('common.pleaseEnter')"
              :disabled="disabled"
              type="textarea"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            :label="$t('common.earlyStart')"
            prop="early_start_dependency"
          >
            <el-input
              v-model="formData.early_start_dependency"
              :placeholder="$t('common.pleaseEnter')"
              :disabled="disabled"
              type="textarea"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            :label="$t('common.taskDescription')"
            prop="task_description"
          >
            <el-input
              v-model="formData.task_description"
              :placeholder="$t('common.inputTaskDescription')"
              :disabled="disabled"
              type="textarea"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { WBSProjectList } from "@/api/wbs/model";
import { TaskInfo, WBSQuery } from "@/api/task/model";
import { SiteQuery } from "@/api/dashboard/model";
import DashboardAPI from "@/api/dashboard";
import TaskAPI from "@/api/task";
defineOptions({
  name: "BasicInfoForm",
});
const { t } = useI18n();
// 状态
const statusOptions = ref<Options[]>([
  {
    value: -1,
    label: t("common.cancelled"),
  },
  {
    value: 0,
    label: t("common.notStarted"),
  },
  {
    value: 1,
    label: t("common.haveInHand"),
  },
  {
    value: 2,
    label: t("common.completed"),
  },
]);

const props = withDefaults(
  defineProps<{
    projectInfo: WBSProjectList | undefined;
    disabled: boolean;
    projectOptions: Options[];
    groupleaderOptions: Options[];
    stakeholderOptions: Options[];
    pId: string;
    sId: string;
    wId: string;
  }>(),
  {
    disabled: false,
    projectOptions: () => {
      return [];
    },
    groupleaderOptions: () => {
      return [];
    },
    stakeholderOptions: () => {
      return [];
    },
    pId: "",
    sId: "",
    wId: "",
  }
);

const handleChange = (value: any) => {
  // const index = props.groupleaderOptions.findIndex(
  //   (option) => option.value === value
  // );
  // // 现在接口没有返回人员电话
  // formData.person_incharge_phone = props.groupleaderOptions[index].phone;
};

const formData = reactive<TaskInfo>({
  status: 1,
  wbs_id: "",
});
const formRef = ref(ElForm);
const rules = reactive({
  project_id: [
    { required: true, message: t("common.pleaseSelect"), trigger: "blur" },
  ],
  site_id: [
    { required: true, message: t("common.pleaseSelect"), trigger: "blur" },
  ],
  wbs_id: [
    { required: true, message: t("common.pleaseSelect"), trigger: "blur" },
  ],
  task_name: [
    { required: true, message: t("common.pleaseEnter"), trigger: "blur" },
  ],
  person_incharge: [
    { required: true, message: t("common.pleaseSelect"), trigger: "blur" },
  ],
  start_d: [
    { required: true, message: t("common.pleaseSelect"), trigger: "blur" },
  ],
  end_d: [
    { required: true, message: t("common.pleaseSelect"), trigger: "blur" },
  ],
  stakeholder_id: [
    { required: true, message: t("common.pleaseSelect"), trigger: "blur" },
  ],
  status: [
    { required: true, message: t("common.pleaseSelect"), trigger: "blur" },
  ],
});

const siteOptions = ref<Options[]>([]);
const wbsOptions = ref<Options[]>([]);

const getSiteOptions = async (params: SiteQuery) => {
  const data = await DashboardAPI.getSite(params);
  if (data.list.length > 0) {
    siteOptions.value = data.list.map((item) => {
      return {
        value: item.id,
        label: item.s_name,
      };
    });
  }
};

const getWBSOptions = async (params: WBSQuery) => {
  // 如果是新增，那么就只有2的状态
  let param = { ...params };
  if (!formData.id) {
    param = { ...params, status: 2 };
  }
  const data = await TaskAPI.getWBS(param);
  if (data.list.length > 0) {
    wbsOptions.value = data.list.map((item) => {
      return {
        value: item.id,
        label: item.wbs_name,
      };
    });
  }
};
const id = ref<string | number>("");
watchEffect(() => {
  formData.project_id = props.pId;
  if (props.pId) {
    formData.site_id = props.sId;
    getSiteOptions({
      project_id: props.pId,
      page: 1,
      page_size: 10000000,
    });
  }
  if (props.sId) {
    formData.wbs_id = props.wId;
    id.value = formData.id as string | number;
    getWBSOptions({
      project_id: props.pId,
      site_id: props.sId,
      page: 1,
      page_size: 10000000,
    });
  }
});

const handleProjectChange = (e: string) => {
  let params: SiteQuery = {
    project_id: e,
    page: 1,
    page_size: 10000000,
  };
  formData.site_id = "";
  siteOptions.value = [];
  wbsOptions.value = [];
  formData.wbs_id = "";
  getSiteOptions(params);
};
const handleSiteChange = (e: number) => {
  let params: WBSQuery = {
    project_id: formData.project_id as string,
    site_id: e,
    page: 1,
    page_size: 10000000,
  };
  formData.wbs_id = "";
  wbsOptions.value = [];
  getWBSOptions(params);
};

defineExpose({ formRef, formData });
</script>
